<template>
  <div class="approval-container">
    <a-spin :spinning="spinning">
      <a-card>
        <title-name title="年度产值信息" />
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item
              label="分公司"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.branchComName" type="text" disabled></BaseInput>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item
              label="项目名称"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.projectName" type="text" disabled></BaseInput>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item
              label="项目编号"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.projectCode" type="text" disabled></BaseInput>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item
              label="合同额(亿元)"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.contractAmount" type="text" disabled></BaseInput>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item
              label="年份"
              class="custom-width"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.year" :disabled="true" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item
              label="全年产值指标(万元)"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.yearPlanOutput" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item
              label="记录人"
              class="custom-width"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <a-input v-model="dels.recorderName" :disabled="true" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item
              label="记录时间"
              :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <a-input v-model="dels.recorderTime" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row style="margin-left: 36px">
          <a-col :span="24" style="margin-bottom: 10px; color: rgba(0, 0, 0, 0.85)">月度产值指标</a-col>
          <a-col :span="24">
            <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false">
              <template slot="outputValue1" slot-scope="text, record">
                <editable-cell
                  v-bind="$props"
                  :text="record['outputValue1']"
                  @change="onCellChange(record.key, 'outputValue1', $event)"
                />
              </template>
              <template slot="outputValue2" slot-scope="text, record">
                <editable-cell
                  v-bind="$props"
                  :text="record['outputValue2']"
                  @change="onCellChange(record.key, 'outputValue2', $event)"
                />
              </template>
              <template slot="outputValue3" slot-scope="text, record">
                <editable-cell
                  v-bind="$props"
                  :text="record['outputValue3']"
                  @change="onCellChange(record.key, 'outputValue3', $event)"
                />
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-card>
    </a-spin>
    <div v-if="!isConsultation" class="tool-btns page-btn-right-top">
      <a-button class="mr20" type="primary" @click="handleClose"> 关闭 </a-button>
    </div>
  </div>
</template>

<script>
import { getOutputYearDetail, getOutputYearInputYear, getOutputBasic } from '@/api/project/productionRecords'
import EditableCell from '@/views/project/productionRecords/components/EditableCell'
export default {
  name: 'ProductionRecordsDetails',
  components: { EditableCell },
  props: {
    // 是否作为意见征询
    isConsultation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      spinning: false,
      dataSource: [],
      columns: [
        {
          title: '月份',
          dataIndex: 'month1',
          width: '80px'
        },
        {
          title: '当月计划产值(万元)',
          index: 1,
          scopedSlots: { customRender: 'outputValue1' }
        },
        {
          title: '月份',
          dataIndex: 'month2',
          width: '80px'
        },
        {
          title: '当月计划产值(万元)',
          index: 2,
          scopedSlots: { customRender: 'outputValue2' }
        },
        {
          title: '月份',
          dataIndex: 'month3',
          width: '80px'
        },
        {
          title: '当月计划产值(万元)',
          index: 3,
          scopedSlots: { customRender: 'outputValue3' }
        }
      ],
      dels: {
        branchComName: ''
      }
    }
  },
  created() {
    this.getOutputYearDetail()
  },
  methods: {
    // 关闭
    handleClose() {
      this.$close()
    },
    getOutputBasic(id) {
      getOutputBasic({ id })
        .then((res) => {
          Object.assign(this.dels, res.data)
          this.spinning = false
          this.$forceUpdate()
        })
        .catch(() => {
          this.spinning = false
        })
    },
    getOutputYearDetail() {
      this.spinning = true
      getOutputYearDetail({ id: this.$route.query.id })
        .then(async (res) => {
          this.dels = res.data
         await this.getOutputBasic(res.data.outputId)
          await this.handlerMonth(res.data.monthVOList)
        })
        .catch(() => {
          this.spinning = false
        })
    },
    // 针对下发的月份 重新整理
    handlerMonth(monthVOList) {
      const tempList = [
        ['1月', '2月', '3月'],
        ['4月', '5月', '6月'],
        ['7月', '8月', '9月'],
        ['10月', '11月', '12月']
      ]
      const dataSource = tempList.map((v, vi) => {
        const obj = {
          key: vi,
          month1: '',
          month2: '',
          month3: '',
          id1: '',
          id2: '',
          id3: '',
          outputValue1: '',
          outputValue2: '',
          outputValue3: ''
        }
        // v === ['1月', '2月', '3月'],
        v.forEach((i, ii) => {
          let o =  monthVOList.filter((m) => m.monthly == i)
          if(o.length === 0){
            obj[`id${ii + 1}`] = ''
            obj[`month${ii + 1}`] = i
            obj[`outputValue${ii + 1}`] = ''
            return
          }
          const { id, monthly, planAmount } = o[0]
          obj[`id${ii + 1}`] = id
          obj[`month${ii + 1}`] = monthly
          obj[`outputValue${ii + 1}`] = planAmount
        })
        console.log(obj, 1)
        return obj
      })
      this.dataSource = dataSource
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource]
      const target = dataSource.find((item) => item.key === key)
      if (target) {
        target[dataIndex] = value
        this.dataSource = dataSource
      }
    }
  }
}
</script>

